<template>
  <v-card-text class="pa-0">
    <v-hover
      v-for="(row, i) in inputValue"
      :key = "row.id"
      v-slot:default="{ hover }"
    >
      <ul class="px-6"
        :style = "Object.assign({
            'border-bottom': $store.state.vularApp.content.color + ' solid 1px',
            background: hover ? 'rgba(0, 0, 255, 0.1)' : ''
          },
          row['styles']
        )"

        :class="transshape ? 'vular-list-body-small' : 'vular-list-body'"
      >
        <li v-if="canSelect" class="select-col">
          <v-checkbox
            v-model="row.selected"
          ></v-checkbox>
        </li>
        <li 
          v-for="column in columns"
          :key="column.field"
          :style="{
            flex: transshape ? '' : column.flex,
            width: transshape ? '' : column.width,
          }"
          class="py-5"
        >
          <div
            v-if="transshape"
            class="column-title"
          >
            {{column.title}}
          </div>
          <div 
            v-if="!row[column.field] || typeof(row[column.field]) == 'string'"
            key="string-col"
          >
            {{row[column.field]}}
          </div>
          <VularNode
            v-else
            key="object-col"
            :schema = "row[column.field]"
          >
          </VularNode>
        </li>
        <li class="list-action"         
        :style="{
            width: !transshape ? actionsColumn.width :'',
          }"
        >
          <template if="hover">
            <v-tooltip top
              v-for="(action, index) in rowShortcutActions"
              :key="index"
            >
              <template v-slot:activator="{ on }">
                <v-btn icon color="primary" 
                  v-on="on"
                  :key = "index"
                  @click = "onRowAction(action, row)"
                >
                  <v-icon small v-text="action.icon"></v-icon>
                </v-btn>
              </template>
              <span>{{action.title}}</span>
            </v-tooltip>
          </template>
          <v-menu offset-y v-if="popedActions.length > 0">
            <template v-slot:activator="{ on }">
              <v-btn icon color="primary"
                v-on="on"
              >
                <v-icon small>mdi-dots-horizontal</v-icon>
              </v-btn>
            </template>
            <v-list :color="$store.state.vularApp.content.card.color" class="px-2">
              <v-list-item link
                v-for="(action, index) in popedActions"
                :key = "index"
                @click = "onRowAction(action, row)"
              >
                <v-list-item-icon>
                  <v-icon color="primary" v-text="action.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>{{action.title}}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-menu>
        </li>
      </ul>
    </v-hover>
  </v-card-text>
</template>

<script>
  export default {
    name: 'vular-list-body',
    props: {
      columns: {default : ()=>{return {}}},
      rowActions : {default : ()=>{return {}}},
      canSelect : {default:true},
      actionsColumn: {
        default : ()=>{
          return {}
        }
      },
      value:{default:[]},
      transshape : {default :'false'},
    },

    data () {
      return {
      }
    },

    computed:{
      inputValue: {
        get:function() {
          return this.value;
        },
        set:function(val) {
          this.$emit('input', val);
        },
      },

      rowShortcutActions(){
        let actions = []
        this.rowActions.forEach(action=>{
          if(action.shortcut){
            actions.push(action)
          }
        })

        return actions
      },

      popedActions(){
        let actions = []
        this.rowActions.forEach(action=>{
          if(!action.shortcut){
            actions.push(action)
          }
        })

        return actions
      },
    },

    methods: {
      onRowAction(actionCtrl, row){
        let action = Object.assign({}, actionCtrl.action)
        action.to.params.data = row.id
        window.$bus.$emit("VularAction", action, this.vularId)
      },
    },
  }
</script>

<style>
  .vular-list-body{
    list-style: none;
    padding: 0; 
    margin:0;
    display: flex; 
    flex-flow: row;
    padding: 0 !important;
    flex: 1;
  }


  .vular-list-body li{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right:20px;
    word-break:break-all;
  }

  .vular-list-body .list-action{
    justify-content: flex-end;
  }

  .vular-list-body .select-col{
    width: 50px;
  }

  .vular-list-body-small{
    list-style: none;
    padding: 0; 
    margin:0;
    display: flex; 
    flex-flow: column;
    padding: 0 !important;
    flex: 1;
  }

  .vular-list-body-small li{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right:20px;
    word-break:break-all;
    cursor: pointer;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }

  .vular-list-body-small .select-col, .vular-list-body-small .list-action{
    justify-content: flex-end;
  }

  .vular-list-body-small .column-title{
    font-weight: bold;
  }
</style>